<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex弹性盒子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css">
</head>
<body>
   <div class="center">
        <div class="topTab">
            <div class="title">
                <p class="jb">经典均衡饮食 </p>
                <p class="p2">2天</p>
            </div>
            <div class="tab">
                <div class="tabs" style="flex: 1;">
                    <h6> 摄入</h6>
                    <h3>513</h3>
                </div>
                <div class="tabs yuan" style="position: relative">
                    <div class="yuanOne"></div>
                    <h6> 还可以吃</h6>
                    <h3>513</h3>
                    <h6> 推荐预算</h6>
                </div>
                <div class="tabs"style="flex: 1;">
                    <h6> 运动</h6>
                    <h3>0</h3>
                </div>
            </div>
        </div>

       <div class="topList">
           <div class="topListTitle">
               <p>午餐 <span> 建议634卡-761卡 </span></p>
               <p><span>513 </span> 千卡 </p>
           </div>

           <div class="foods">
               <div class="food">
                   <img src="" alt="">
                   <div class="texts">
                       <h5>玉米（xian）</h5>
                       <p>1.0根（中）</p>
                   </div>
               </div>
               <div class="foodsLeft">
                   <p>148千卡</p>
               </div>
           </div>

           <div class="foods">
               <div class="food">
                   <img src="" alt="">
                   <div class="texts">
                       <h5>玉米（xian）</h5>
                       <p>1.0根（中）</p>
                   </div>
               </div>
               <div class="foodsLeft">
                   <p>148千卡</p>
               </div>
           </div>

           <div class="foods">
               <div class="food">
                   <img src="" alt="">
                   <div class="texts">
                       <h5>玉米（xian）</h5>
                       <p>1.0根（中）</p>
                   </div>
               </div>
               <div class="foodsLeft">
                   <p>148千卡</p>
               </div>
           </div>   

       </div>
   </div>


</body>
</html>